/* 编写index.html的样式 */

/* 设置头部得样式 */
.header{
    /* 设置宽度 */
    /* width: 100%; */

    /* min-width表示指定元素的最小宽度 */
    min-width: 1200px;
    /* 设置高度 */
    height: 44px;
    /* 设置背景颜色 */
    background-color: #0092d8;
    /* 设置行高 */
    line-height: 44px;
}

/* 设置logo的样式 */
.header .logo{
    /* font-size: 0; */

    /*text-indent 用来设置首行缩进  */
    text-indent:-9999px ;

    /* 可以通过开启BFC来解决外边距的折叠问题 */
    /* overflow: hidden; */

    /* 向左浮动 */
    float: left;

    /* 设置右内边距 */
    padding-right: 25px;
}

/* 设置logo中的超链接 */
.header .logo a{
    /* 转换为块元素 */
    display: block;
    /* 设置宽度 */
    width: 55px;
    /* 设置高度 */
    height: 30px;
    /* 设置背景颜色 */
    /* background-color: #bfa; */
    /* 设置外边距 */
    margin-left: 40px;
    margin-top: 6px;
    /* 设置背景图片 */
    background-image: url(../img/pc_midea_logo_s.png);
    /* 这里logo使用的是2倍图，所以我们需要将图片缩小以使其完全显示 */
    background-size: 55px 30px;

}

/* 设置左侧导航的样式 */
.header .nav{
    /* 设置浮动 */
    float: left;
}

/* 设置导航菜单中的li */
.header .nav li{
    /* 设置浮动 */
    float: left;
}

/* 设置超链接的样式 */
.header .nav a{
    /* 设置块元素 */
    display: block;
    /* 设置内边距 */
    padding: 0 30px;
    color: #a3c3e6;
}

.header .nav a:hover{
    color: #fff;
}

/* 设置右侧的导航菜单 */
.header .option{
    float: right;
}

/* 设置菜单项 */
.header .option li{
    float: left;
}

.header .option li:hover{
    background-color: rgb(38, 111, 164);
}

/* 设置链接的样式 */
.header .option a,
.header .option .wx{
    display: block;
    position: relative;
    height: 44px;
    padding: 0 25px;
}

/* 设置小图片 */
.header .option i{
    display: inline-block;
    margin-top: 11px;
    width: 20px;
    height: 20px;
    /* 设置背景图片 */
    background-image: url(../img/index_sprite.png);
}

/* 设置小图标 */
.header .option .search{
    /* 设置小图标的偏移量 */
    background-position: -96px -215px;
}

.header .option .weixin{
    background-position: -120px -215px;
}

.header .option .cart{
    background-position: -146px -215px;
}

.header .option .user{
    background-position: -35px -216px;
}

/* 设置登录文字的对齐方式 */
.header .option .login-text{
    /* 设置垂直对齐，使文字和图标是对齐的 */
    vertical-align: 5px;
    color: #fff;
}

/* 设置下拉层 */
.header .option .hide{
    /* 隐藏元素 */
    display: none;
    width: 367px;
    height: 253px;
    /* 开启绝对定位 */
    position: absolute;
    background-image: url(../img/5e7c6878e200f.jpg);

    top: 44px;
    right: 0;

    /* 设置层级 */
    z-index: 999;
}

.header .option .wx:hover .hide{
    display: block;
}


/* 设置通知栏的样式 */
.notice{
    background-color: rgb(18, 59, 103);
    color: white;

    /* 设置文本的对齐方式  */
    text-align: center;

    /* 设置行高 */
    line-height: 16px;
    padding: 4px;
}

/* 设置服务栏容器的样式 */
.service-wrapper{
    min-width: 1200px;
    height: 40px;
    border-bottom: 1px rgba(0, 0, 0, .1) solid;
}

/* 设置服务栏 */
.service-wrapper .service{
    /* 设置垂直居中 */
    line-height: 40px;
}

.service-wrapper .service li{
    float: left;
    /* 设置宽度 */
    width: 20%;
    /* 设置文字居中 */
    text-align: center;
}

/* 设置小图标的样式 */
.service-wrapper i{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../img/index_service_sprite_v3.png) ;
    vertical-align: top;
    background-size: 200px;
}

.service-wrapper .s2{
    background-position: -40px 0;
}

.service-wrapper .s3{
    background-position: 0 -40px;
}

.service-wrapper .s4{
    background-position: -40px -40px;
}


.service-wrapper .s3{
    background-position: -80px -40px;
}

/* 设置左侧的菜单 */
.main .menu{
    width: 220px;
    /* height: 480px; */
    background-color: rgba(0,0,0,.6);
    padding: 16px 0;
}

.main .menu li{
    height: 56px;
    line-height: 56px;
    color: #fff;
}

.main .menu li:hover{
    background-color: rgba(0, 0, 0, .6);
}


.main .menu li a:nth-of-type(2){
    color: #f0f0f0;
    opacity: .5;
    margin-left: 10px;
}

/* 设置菜单中的小图标 */
.main .menu i{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../img/index_sprite.png);
    vertical-align: middle;
    margin: 0 21px;
}

.main .menu .m2{
    background-position: -30px 0;
}

.main .menu .m3{
    background-position: -60px 0;
}

.main .menu .m4{
    background-position: -90px 0;
}

.main .menu .m5{
    background-position: -120px 0;
}

.main .menu .m6{
    background-position: -150px 0;
}

.main .menu .m7{
    background-position: -180px 0;
}

.main .menu .m8{
    background-position: -210px 0;
}




.main .menu .hot{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-position: -69px -188px;
    margin: 0;
}